<template>
  <div class="split_list">
    <div class="split_list_search">
      <div class="search_box">
        <el-select
          style="width: 151px;"
          v-model="featchData.payType"
          placeholder="请选择"
        >
          <el-option
            v-for="item in modeOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
            <span style="float: left">{{ item.label }}</span>
          </el-option>
        </el-select>
      </div>
      <div class="search_box">
        <el-select
          style="width: 151px;"
          v-model="featchData.enableStat"
          placeholder="请选择"
        >
          <el-option
            v-for="item in statusOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
            <span style="float: left">{{ item.label }}</span>
          </el-option>
        </el-select>
      </div>
      <div class="search_box">
        <el-date-picker
          v-model="featchData.dateTime"
          style="width: 290px;"
          type="daterange"
          clearable
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
      <div class="search_box">
        <el-input
          style="width: 180px;"
          v-model="featchData.query"
          placeholder="方案名称"
        ></el-input>
      </div>
      <div class="search_box">
        <el-button class="seach_btn" type="primary" style="height: 36px;" @click="searchData">搜索</el-button>
        <span class="reset_btn" @click="resetData()">重置</span>
      </div>
      <div style="margin-bottom: 16px;">
        <el-button style="height: 36px;" @click="createProgram" type="primary">
          创建方案
        </el-button>
      </div>
    </div>
    <div class="split_list_table">
      <page-table-new
        :tableData="tableData"
        :total="total"
        :featchData="featchData"
        :defaultSort="{ prop: 'modifyTime', order: 'descending' }"
        :tableColumns="tableColumns"
        @pageChange="handlePageChange"
        @sortChange="handleSortChange"
      >
      <!-- 分成方式 -->
      <template #paytype="scope">
        <div>
          <span v-if="scope.row.paytype === 1">固定分成方式</span>
          <span v-if="scope.row.paytype === 2">日期方式</span>
          <span v-if="scope.row.paytype === 3">充值金额方式</span>
          <span v-if="scope.row.paytype === 4">日期与金额混合</span>
        </div>
      </template>
      <!-- 创建时间 -->
      <template #createdat="scope">
        <div>
          <span>{{ dateFormat(scope.row.createdat) }}</span>
        </div>
      </template>
      <!-- 应用角色 -->
      <template #suitrole="scope">
        <div>
          <span v-if="scope.row.suitrole === 1">推广商</span>
          <span v-if="scope.row.suitrole === 2">推广员</span>
          <span v-if="scope.row.suitrole === 3">代理商</span>
        </div>
      </template>
      <!-- 方案状态 -->
      <template #enablestat="scope">
        <div>
          <span v-if="scope.row.enablestat === 1">启用</span>
          <span v-if="scope.row.enablestat === 2">停用</span>
        </div>
      </template>
        <template #action="scope">
          <div class="action_column">
            <i
              class="iconfont icon-chakan"
              style="font-size: 18px;"
              @click="previewItem(scope.row)"
              title="查看"
            ></i>
            <i
              style="font-size: 18px;"
              class="iconfont icon-bianji"
              @click="editItem(scope.row)"
              title="编辑"
            ></i>
            <el-popconfirm
              @onConfirm="confirmEnable(scope.row)"
              title="确定启用该方案吗？"
              v-if="scope.row.enablestat === 2"
            >
              <i
                slot="reference"
                class="iconfont icon-qiyong"
                style="font-size: 18px;"
                title="启用"
              ></i>
            </el-popconfirm>
            <el-popconfirm
              @onConfirm="confirmDisable(scope.row)"
              title="确定禁用该方案吗？"
              v-if="scope.row.enablestat === 1"
            >
              <i
                slot="reference"
                class="iconfont icon-jinyong"
                style="font-size: 18px;"
                title="禁用"
              ></i>
            </el-popconfirm>
            <el-popconfirm
              @onConfirm="deleteDisable(scope.row)"
              title="确定删除该方案吗？"
            >
              <i
                slot="reference"
                class="iconfont icon-shanchu"
                style="font-size: 18px;"
                title="删除"
              ></i>
            </el-popconfirm>
          </div>
        </template>
      </page-table-new>
    </div>
  </div>
</template>

<script>
import pageTableNew from "@com/tableNew";
import { getListDtoByPage,enabledScheme,disabledScheme,deleteScheme } from "@/api/splitallocation";
import { formatDate } from "@/utils/validate";

import {
  PROGRAMME_OPTIONS,
  SPLIT_STATUS_OPTIONS,
  SPLIT_TABLE_COLUMNS
} from "../const";
export default {
  name: "extensionSplitallocation",
  components: { pageTableNew },
  data() {
    return {
      modeOptions: PROGRAMME_OPTIONS,
      statusOptions: SPLIT_STATUS_OPTIONS,
      featchData: {
        pageSize: 20,
        pageStart: 1,
        payType: '', //分成方式
        enableStat: '', //账号是否启用
        dateTime: [], //时间区间
        query: "" //方案名称
      },
      tableData: [],
      tableColumns: SPLIT_TABLE_COLUMNS,
      total: 0
    };
  },
  created() {
    this.searchData();
  },
  computed: {
    dateFormat(){
      return function(date){
        if(date){
          return formatDate(new Date(date),'yyyy-MM-dd')
        }
      }
    }
  },
  methods: {
    handlePageChange() {},
    handleSortChange() {},
    searchData() {
      let params = {
        page: this.featchData.pageStart,
        pageSize: this.featchData.pageSize,
        query: this.featchData.query,
        startAt: this.featchData.dateTime[0]?this.featchData.dateTime[0].getTime():'',
        endAt: this.featchData.dateTime[1]?this.featchData.dateTime[1].getTime():'',
        payType: this.featchData.payType,
        enableStat: this.featchData.enableStat
      };
      // "suitRole": 1,
      getListDtoByPage(params).then(res => {
        this.total = res.data.total;
        this.tableData = res.data.values;
      });
    },
    //重新搜索
    resetData() {
      this.featchData = {
        pageSize: 20,
        pageStart: 1,
        payType: '', 
        enableStat: '', 
        dateTime: [], 
        query: "" 
      };
      this.$nextTick(()=>{
        this.searchData();
      })
    },
    //确认启用
    confirmEnable(item) {
      enabledScheme({id:item.id}).then((res)=>{
        if(res.code === 0){
          this.$message({
            message: "启用成功",
            type: "success"
          });
          this.searchData();
        }else{
          this.$message.error(res.message);
        }
      })
    },
    //确认禁用
    confirmDisable(item) {
      disabledScheme({id:item.id}).then((res)=>{
        if(res.code === 0){
          this.$message({
            message: "禁用成功",
            type: "success"
          });
          this.searchData();
        }else{
          this.$message.error(res.message);
        }
      })
    },
    //确认删除
    deleteDisable(item){
      deleteScheme({id:item.id}).then((res)=>{
     if(res.code === 0){
          this.$message({
            message: "删除成功",
            type: "success"
          });
          this.searchData();
        }else{
          this.$message.error(res.message);
        }
      })
    },
    //创建分成方案
    createProgram() {
      var view = {
        meta:{
          module: "extensionSplitallocation",
          parent: "extension",
          title: "母包",
        },
        fullPath: "/extension/splitcreate",
        name: "extensionSplitallocation",
        path: "/extension/splitcreate"
      }
      this.$store.dispatch('tagsView/delView', view).then(() => {
        this.$router.push({
          path: "/extension/splitcreate",
          query:{
            type: "create"
          }
        });
      })
    },
    //跳转分成方案编辑
    editItem(item) {
      var view = {
        meta:{
          module: "extensionSplitallocation",
          parent: "extension",
          title: "母包",
        },
        fullPath: "/extension/splitcreate",
        name: "extensionSplitallocation",
        path: "/extension/splitcreate"
      }
      this.$store.dispatch('tagsView/delView', view).then(() => {
        this.$router.push({
          path: "/extension/splitcreate",
          query: {
            type: "edit",
            id: item.id
          }
        });
      })
    },
    //查看分成方案详情
    previewItem(item) {
      var view = {
        meta:{
          module: "extensionSplitallocation",
          parent: "extension",
          title: "母包",
        },
        fullPath: "/extension/splitcreate",
        name: "extensionSplitallocation",
        path: "/extension/splitcreate"
      }
      this.$store.dispatch('tagsView/delView', view).then(() => {
        this.$router.push({
          path: "/extension/splitcreate",
          query: {
            type: "detail",
            id: item.id
          }
        });
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.split_list {
  .split_list_search {
    .search_box {
      display: inline-block;
      vertical-align: top;
      margin-right: 6px;
      margin-bottom: 16px;
      .reset_btn {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #777777;
        text-align: justify;
        margin-left: 12px;
        cursor: pointer;
      }
    }
  }
  .split_list_table {
    background: #ffffff;
    box-shadow: 0 0 6px 0 rgba(0, 21, 41, 0.09);
    border-radius: 4px;
    padding: 16px 16px 0 16px;
    margin: 0 0 16px 0;
    .red_button {
      margin-left: 4px;
    }
    .action_column {
      i {
        color: var(--themeColor);
        margin-right: 8px;
        cursor: pointer;
      }
    }
  }
}
</style>
